<template>
  <div class="tagcloud_page">
   <div>
        <Card :padding="0" shadow style="width: 300px;padding:0 0 20px  0">
          <div slot="title">
              <div class="demo-avatar">
                <Avatar src="
https://happychuan.oss-cn-shenzhen.aliyuncs.com/default/default-avatar.png" size="large" />
              </div>
              <p class="center name">HappChuan</p>
              <p class="center motto">{{motto}}</p>
            </div>
            <table class="info">
              <tr class="info-title">
                <td>文章</td><td>访问</td><td>评论</td>
              </tr>
              <tr class="info-number">
                <td>{{this.$store.state.total || 0}}</td><td>{{this.$store.state.visitTotal}}</td><td>{{commentTotal}}</td>
              </tr>
            </table>
        </Card>
    </div>
  </div>
</template>

<script>
export default {
   data () {
            return {
                switchValue: true,
                motto:'时间从来不语，却回答了所有的问题',
                commentTotal:0,
            }
        },
        methods:{
          init(){
            this.$axios.get('/api/motto').then(res=>{
              if(res.data.data){
                this.motto = res.data.data[0].saying
              }
            })
            this.$axios.get('/api/comment/total').then(res=>{
              this.commentTotal = res.data.data
            })
          }
        },
        mounted(){
          this.init()
        }
}
</script>

<style scoped>
  .center{
    text-align: center
  }
  .name{
    font-family: Couriernow Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-top: 10px;
    font-weight: bold
  }
  .demo-avatar{
    text-align: center
  }
  .motto{
    font-size: 12px
  }
  .info{
    width: 300px;
    text-align: center;
    margin-top: 10px
  }
  .info-title{
    color: #999
  }
  .info-number{
    color: #78A5F1
  }
</style>